<!-- 
1、引入vue.js
2、创建视图
3、创建Vue实例
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 1、引入vue.js -->
    <script src="./js/vue.js"></script>
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background: pink;
        }


    </style>
</head>

<body>
    <!-- 2、创建视图 -->
    <div id="app">
        <!-- 插值表达式 {{}} -->
        {{url}}
        <!-- 作用：用来跳转页面 -->
        <!-- 需求1，通过Vue的变量动态修改a标签跳转的值 -->
        <a v-bind:href="url">跳转到百度页面</a>
        <!-- 需求2，通过Vue来给标签的style属性动态赋值 -->
        <h1 v-bind:style="style">通过Vue来给标签的style属性动态赋值</h1>
        <!-- 需求3，通过Vue来给标签添加class属性 -->
        <div v-bind:class="className">通过Vue来给标签添加class属性</div>

        <!-- 需求1，通过Vue的变量动态修改a标签跳转的值 -->
        <a :href="url">跳转到百度页面</a>
        <!-- 需求2，通过Vue来给标签的style属性动态赋值 -->
        <h1 :style="style">通过Vue来给标签的style属性动态赋值</h1>
        <!-- 需求3，通过Vue来给标签添加class属性 -->
        <div :class="className">通过Vue来给标签添加class属性</div>
    </div>
</body>

</html>
<script>
    //  3、创建Vue实例
    new Vue({
        el: "#app", //必传 页面上绑定的元素
        //数据部分
        data() {
            return {
                url: "http://baidu.com",
                style:{
                    // 设置字体大小为30px
                    fontSize:"30px",
                    // 设置颜色为粉色
                    color:"pink"
                },
                className:"box"
            }
        }
    })

</script>